/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SectionList,
  FlatList,
  Alert,
  RefreshControl
} from 'react-native';
import BabyNameApi from './api/babyNameApi';


export default class App extends Component<{}> {
  constructor(props){
    super(props);
    this.BabyNameApi=new BabyNameApi();
    this.state={
      names:this.BabyNameApi.getAllNames(),
      namesByYear:this.BabyNameApi.getAllNamesByYears(),
      refreshing:false
    }
    console.log('state',this.state)
  }
  render() {
    console.log(this.state.namesByYear)
    return (
      <View style={styles.container}>
        <SectionList
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={()=>{
                this.setState({refreshing:true})
                setTimeout(() => {
                  this.setState({refreshing:false})
                }, 2000);
              }}
              />
          }
          sections={this.state.namesByYear}
          renderItem={({item}) => <Text style={styles.row}>{item.key}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.header}>{section.title}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 20,
  },
  row: {
    padding: 10,
    borderWidth: .5,
    borderColor: 'black',
    height: 50,
    fontSize: 18,
  },
  header: {
    padding: 12,
    backgroundColor: 'gray',
    fontSize: 36,
    fontWeight: 'bold',
    height: 60
  }
});
